
import React from 'react';

import styles from './GoodsOrderList.css';
import {Table, Divider, Tag, message, Popover, Drawer, Input, Form, Button, Select} from 'antd';
import UserService from "../../business/user/UserService";
import TextArea from "antd/lib/input/TextArea";
import {GiftOrderDomain} from "../../business/gift/GiftOrderDomain";

const Option = Select.Option;

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 17 },
};
class GoodsOrderList extends React.Component{

  constructor(props) {
    super(props);
    this.userService =new UserService();
    this.searchConditionUmId = this.searchConditionUmId.bind(this);
    this.searchConditionOrderStatus = this.searchConditionOrderStatus.bind(this);
    this.callBackQueryList = this.callBackQueryList.bind(this);
    this.handleVisibleChange = this.handleVisibleChange.bind(this);
    this.onCloseDrawer = this.onCloseDrawer.bind(this);
    this.deliverGood = this.deliverGood.bind(this);
    this.shipMessageChange = this.shipMessageChange.bind(this);
    this.deliverSubmit = this.deliverSubmit.bind(this);
    this.deliverSubmitCallBack =this.deliverSubmitCallBack.bind(this);
    this.exchangePage =this.exchangePage.bind(this);
    this.onCloseWithdrawDrawer = this.onCloseWithdrawDrawer.bind(this);
    this.deliverWithdrawSubmit = this.deliverWithdrawSubmit.bind(this);
    this.componentDidMount1 =this.componentDidMount1.bind(this);

  }
  userService:UserService;
  state ={
    giftData:{},
    goodsOrder:new GiftOrderDomain(),
    visible:false,
    current:1,
    withdrawVisible:false,
    withdrawGoodsOrder:new GiftOrderDomain(),
    searchOrderStatus:"all",
    searchUmId:'',
  }
  columns = [{
    title: '用户UMID',
    dataIndex: 'username',
    key: 'username',
    fixed: 'left',
    width: 100,
  }, {
    title: '订单编号',
    dataIndex: 'orderSn',
    key: 'orderSn',
    fixed: 'left',
    width: 100,
  }, {
    title: '礼品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',
  }, {
    title: '礼品数量',
    dataIndex: 'quantity',
    key: 'quantity',
  }, {
    title: '用户留言',
    dataIndex: 'userMessage',
    key: 'userMessage',
  }, {
    title: '图片',
    dataIndex: 'goodsImageName',
    key: 'goodsImageName',
    render:(text,record)=>{
      return (<img src={process.env.POINT_SHOPPING_URL+"/point-shopping/goods/show/"+text} height={80}/>);
    }

  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render:(text,record)=>{
      if(text ==0){
        return "备货中";
      }else if(text ==1){
        return "已发货";
      }else if(text ==2){
        return "完成";
      }else if(text ==3){
        return "取消";
      }
    }

  }, {
    title: '支付时间',
    dataIndex: 'payTime',
    key: 'payTime',
    width: 200,
  }, {
    title: '发货时间',
    dataIndex: 'shipTime',
    key: 'shipTime',
    width: 200,
  }, {
    title: '操作',
    dataIndex: 'status',
    key: 'action',
    width: 150,
    fixed: "right",
    render: (text, record) =>{
      if(text ==0){
        return (<span>
        <a href="javascript:;" onClick={(e)=>this.deliverGood(e,record,'deliver')}>发货</a>
        <Divider type="vertical" />
        <a href="javascript:;" onClick={(e)=>this.withdrawGood(e,record)}>取消</a>
      </span>);
      }else if(text ==1){
        return (<a href="javascript:;" onClick={(e)=>this.deliverGood(e,record,'finish')}>确认收货</a>);
      }else if(text ==2){
        return "";
      }else if(text ==3){
        return "";
      }
    } ,
  }];

  callBackQueryList(giftOrder,isSuccess){
    if(!isSuccess || giftOrder.code !="000000"){
      message.info(giftOrder.message);
    }else{
      this.setState({giftData: giftOrder.data});
    }
  }

  handleVisibleChange(e,orderSn){
    this.setState({ [orderSn]: true});
  }

  componentDidMount(){
    console.info("giftPage htpp start");
    let data ={
      currentPage:this.state.current-1,
      size:5,
      orderStatus:this.state.searchOrderStatus=='all'?null:this.state.searchOrderStatus,
      username:this.state.searchUmId,
    };
    let token = sessionStorage.getItem('adminLoginToken');
    this.userService.queryUserAllOrder(data,token,this.callBackQueryList);
  }

  componentDidMount1(){
    console.info("giftPage htpp start");
    let data ={
      currentPage:0,
      size:5,
      orderStatus:this.state.searchOrderStatus=='all'?null:this.state.searchOrderStatus,
      username:this.state.searchUmId,
    };
    let token = sessionStorage.getItem('adminLoginToken');
    this.userService.queryUserAllOrder(data,token,this.callBackQueryList);
  }
  exchangePage(current){
    let data ={
      currentPage:current-1,
      size:5,
      orderStatus:this.state.searchOrderStatus=='all'?null:this.state.searchOrderStatus,
      username:this.state.searchUmId,
    };
    let token = sessionStorage.getItem('adminLoginToken');
    this.userService.queryUserAllOrder(data,token,this.callBackQueryList);
    this.setState({
      current:current,
    });
  }

  show(giftData){
    if(giftData.dataList != undefined && giftData.dataList.length !=0){

     // @ts-ignore
      return (<Table rowKey={record=>record.orderSn}
                    className={styles.goods_order_table}
                    rowSelection={rowSelection}
                    columns={this.columns}
                    dataSource={giftData.dataList}
                    scroll={{ x: 1400 }}
                    pagination={{  //分页
                      total: giftData.total, //数据总数量
                      pageSize: giftData.size,  //显示几条一页
                      defaultPageSize: giftData.size, //默认显示几条一页
                      current:giftData.pageNum+1,
                      showSizeChanger: false,  //是否显示可以设置几条一页的选项
                      onShowSizeChange(current, pageSize) {  //当几条一页的值改变后调用函数，current：改变显示条数时当前数据所在页；pageSize:改变后的一页显示条数
                       // self.toSelectchange(current, pageSize); //这边已经设置了self = this
                      },
                      onChange:(current)=> {  //点击改变页数的选项时调用函数，current:将要跳转的页数
                        this.exchangePage(current);
                      },
                      showTotal: function () {  //设置显示一共几条数据
                        return '共 ' + giftData.total + ' 条数据';
                      }
                    }}
                    />);
    }else{
      return "";
    }
  }

  deliverSubmitCallBack(res,isSuccess){
    if(!isSuccess||res.code != '000000'){
      message.info(res.message);
      return;
    }
    this.setState({
      visible:false,
      withdrawVisible:false,
    });
    this.componentDidMount();

  }

  deliverSubmit(e,deliverOrFinish){
    e.preventDefault();
    const {goodsOrder} = this.state;
    let data = {
      shipMessage:goodsOrder.shipMessage,
      message:goodsOrder.shipMessage,
      orderSn:goodsOrder.orderSn,
    };
    let token = sessionStorage.getItem('adminLoginToken');
    if(deliverOrFinish =='deliver'){
      this.userService.adminDeliverGoods(data,token,this.deliverSubmitCallBack);
    }else{
      this.userService.adminFinishGoods(data,token,this.deliverSubmitCallBack);

    }
  }
  deliverWithdrawSubmit(e){
    e.preventDefault();
    const {withdrawGoodsOrder} = this.state;
    let data = {
      shipMessage:withdrawGoodsOrder.shipMessage,
      orderSn:withdrawGoodsOrder.orderSn,
    };
    let token = sessionStorage.getItem('adminLoginToken');
    this.userService.adminWithdrawGoods(data,token,this.deliverSubmitCallBack);
  }

  deliverGood(e,goodsOrder,deliverOrFinish){
      this.setState({
        visible:true,
        deliverOrFinish:deliverOrFinish,
        goodsOrder:goodsOrder,
      });
  }

  withdrawGood(e,goodsOrder){
    this.setState({
      withdrawVisible:true,
      withdrawGoodsOrder:goodsOrder,
    });
  }

  onCloseDrawer(){
    this.setState({
      visible: false,
    });
  };
  onCloseWithdrawDrawer(){
    this.setState({
      withdrawVisible: false,
    });
  }
  shipMessageChange(event){
    const {goodsOrder} = this.state;
    goodsOrder.shipMessage = event.target.value;
    this.setState({
      goodsOrder:goodsOrder,
    });
  }

  searchConditionUmId(event){
      this.setState({
        searchUmId:event.target.value,
      });
  }

  searchConditionOrderStatus(event){
    const {searchOrderStatus} = this.state
    if(event !=searchOrderStatus){
      this.setState({
        searchOrderStatus:event,
      });
    }

  }



  render() {
    const {giftData,visible,withdrawVisible,goodsOrder,withdrawGoodsOrder,deliverOrFinish} = this.state;
    return (
      <div className={styles.normal}>
        <div className={styles.search_div}>
          <Form layout="inline">
            <Form.Item labelCol={{ span: 9 }}
                       wrapperCol={{ span: 12 }}
                       label="用户UMID">
              <Input onChange={this.searchConditionUmId}/>
            </Form.Item>
            <Form.Item labelCol={{ span: 9 }}
                       wrapperCol={{ span: 12 }}
                       label="订单状态">
              <Select defaultValue="全部" style={{ width: 120 }} onChange={this.searchConditionOrderStatus}>
                <Option value="all">全部</Option>
                <Option value="0">备货中</Option>
                <Option value="1">已发货</Option>
                <Option value="2">完成</Option>
                <Option value="3">取消</Option>

              </Select>
            </Form.Item>
            <Form.Item>
              <Button type="primary"  onClick={()=>this.componentDidMount1()}>查询</Button>
            </Form.Item>
          </Form>
        </div>
        {this.show(giftData)}

        <Drawer
          title={deliverOrFinish=='deliver'?'礼品发货':'礼品兑换确认收货'}
          placement="right"
          width={320}
          closable={false}
          onClose={this.onCloseDrawer}
          visible={visible}
        >
          <Form onSubmit={(e)=>this.deliverSubmit(e,deliverOrFinish)}>
            <Form.Item {...formItemLayout}
                       label="订单号">
              <Input placeholder="Please enter user name" value={goodsOrder.orderSn}/>
            </Form.Item>
            <Form.Item {...formItemLayout}
                       label="留言">
              <TextArea onChange={this.shipMessageChange} >{goodsOrder.shipMessage}</TextArea>
            </Form.Item>
            <Form.Item
              wrapperCol={{ span: 12, offset: 6 }}
            >
              <Button type="primary" htmlType="submit">{deliverOrFinish=='deliver'?'发货':'确认收货'}</Button>
            </Form.Item>
          </Form>
        </Drawer>
        <Drawer
          title="取消礼品"
          placement="right"
          width={320}
          closable={false}
          onClose={this.onCloseWithdrawDrawer}
          visible={withdrawVisible}
        >
          <Form onSubmit={this.deliverWithdrawSubmit}>
            <Form.Item {...formItemLayout}
                       label="订单号">
              <Input value={withdrawGoodsOrder.orderSn}/>
            </Form.Item>
            <Form.Item {...formItemLayout}
                       label="用户UMID">
              <Input value={withdrawGoodsOrder.username}/>
            </Form.Item>
            <Form.Item {...formItemLayout}
                       label="留言">
              <TextArea onChange={this.shipMessageChange} >{withdrawGoodsOrder.shipMessage}</TextArea>
            </Form.Item>
            <Form.Item
              wrapperCol={{ span: 12, offset: 6 }}
            >
              <Button type="primary" htmlType="submit">取消</Button>
            </Form.Item>
          </Form>
        </Drawer>
      </div>
    );
  }
}

export default GoodsOrderList;
